<template>
  <div class="title">{{ title }}</div>

  <DeepChildren class="body"/>
</template>

<script>
import {defineComponent} from 'vue';
import DeepChildren from '@/components/deep/DeepChildren.vue';

export default defineComponent({
  name: 'DeepParent',
  components: {DeepChildren},
  data() {
    return {
      title: 'Deep父组件'
    };
  }
});
</script>

<style scoped>
.title {
  font-weight: bold;
  font-size: 30px;
}

.body > :deep(.title) {
  font-weight: bold;
  font-size: 20px;
}
</style>